<!--银行贷款信息详情-->
<template>
  <div
    v-loading.body="loading"
    class="app-container"
    :style="{height:loading?'100vh':''}"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 0.8)"
  >
    <div class="save-busi-btn">
      <el-button class="filter-item right-btn" type="primary" @click="save()">
        保存</el-button>
      <el-button class="filter-item right-btn" type="primary" @click="suspend() ">
        暂停</el-button>
      <el-button class="filter-item right-btn" type="primary" @click="reject()">
        驳回</el-button>
      <el-button class="filter-item right-btn" type="primary" @click="$router.go(-1)">
        附件</el-button>
      <el-button class="filter-item right-btn" type="primary" @click="submit()">
        提交</el-button>
    </div>
    <el-form
      ref="mainForm"
      :model="formData"
      :rules="rules"
      size="mini"
      class="editForm"
      label-width="120px"
    >
      <!--贷款信息-->
      <!--      <el-divider content-position="left" class="part-title">贷款信息</el-divider>-->
      <div class="part-box">
        <el-row>
          <el-col :span="6">
            <el-form-item label="业务编号" class="car-form-item">
              <el-input v-model="formData.serviceNo" disabled class="car-modal-col" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="查征银行" class="car-form-item">
              <el-input v-model="mainUser.creditResult" disabled class="car-modal-col" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="查征结果" class="car-form-item" required>
              <el-select v-model="mainUser.creditResult" placeholder="请选择" clearable class="car-modal-col">
                <el-option
                  v-for="item in creditList"
                  :key="item.id"
                  :label="item.bankName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户姓名" class="car-form-item">
              <el-input v-model="mainUser.customerName" disabled class="car-modal-col" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="业务部门" class="car-form-item">
              <el-input v-model="formData.serviceGroup" disabled class="car-modal-col" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="业务关系" class="car-form-item">
              <el-input v-model="formData.serviceType" disabled class="car-modal-col" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证件类型" class="car-form-item">
              <el-input v-model="mainUser.certType" disabled class="car-modal-col" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="业务员" class="car-form-item">
              <el-input v-model="formData.serviceUser" disabled class="car-modal-col" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="进件方式" class="car-form-item">
              <el-input v-model="formData.importType" disabled class="car-modal-col" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证件号码" class="car-form-item">
              <el-input v-model="mainUser.certNum" disabled class="car-modal-col" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="查征日期" class="car-form-item">
              <el-input v-model="formData.updateTime" disabled class="car-modal-col" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="银行征信内容" prop="nickName" class="car-form-item">
              <el-input v-model="formData.bankCreditContent" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="征信驳回说明" prop="nickName" class="car-form-item">
              <el-input v-model="formData.rejectContent" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="制单人" class="car-form-item">
              <el-input v-model="formData.creditUser" disabled class="car-modal-col" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="制单日期" class="car-form-item">
              <el-input v-model="formData.createTime" disabled class="car-modal-col" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="征信状态" class="car-form-item">
              <el-input v-model="formData.creditStatus" disabled class="car-modal-col" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户风险等级" class="car-form-item">
              <el-input v-model="formData.riskLevel" class="car-modal-col" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="历史征信信息" prop="nickName" class="car-form-item">
              <el-input v-model="formData.creditHistory" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="操作日志" prop="nickName" class="car-form-item">
              <ve-table
                :columns="columns"
                :table-data="tableData"
                :border-x="true"
                :border-y="true"
                :row-style-option="rowStyleOption"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <el-divider />
    <div class="bottom-file">
      <div class="title">大数据报告</div>
      <div class="file-item-box">
        <div class="file-item">
          <img src="../../../assets/image/look.png">
          <div class="file-name">查看报告</div>
        </div>
        <div class="file-item">
          <img src="../../../assets/image/e-data.png">
          <div class="file-name">E分期大数据</div>
        </div>
        <div class="file-item">
          <img src="../../../assets/image/e-face.png">
          <div class="file-name">E分期面签报告</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import commonService from '@/utils/common-date'

const DB_DATA = []
export default {
  data() {
    return {
      id: '',
      newDialog: false,
      loading: false,
      formData: {},
      calendarTypeOptions: [{ key: '选择' }],
      banks: [], // 银行
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      rowStyleOption: { // 表格样式
        stripe: true, // 斑马纹
        hoverHighlight: true, // hover高亮
        clickHighlight: true // 点击行高亮
      },
      // page index
      pageIndex: 1,
      // page size
      pageSize: 10,
      rules: {},
      groupListData: [],
      authUserData: [],
      creditList: [], // 查证结果
      mainUser: {}, // 主贷人
      checkboxOptipon: {
        // 行选择改变事件
        selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
          console.log(row, isSelected, selectedRowKeys)
        },
        // 全选改变事件
        selectedAllChange: ({ isSelected, selectedRowKeys }) => {
          console.log(isSelected, selectedRowKeys)
        }
      },
      columns: [
        {
          field: '',
          key: 'a',
          title: '编号',
          align: 'center',
          renderBodyCell: ({ row, column, rowIndex }, h) => {
            return (this.pageIndex - 1) * this.pageSize + rowIndex + 1
          }
        },
        { field: 'opUser', key: 'b', title: '审核人', align: 'center' },
        { field: 'opInfo', key: 'c', title: '审核意见', align: 'center' },
        { field: 'opTime', key: 'd', title: '审核日期', align: 'center' },
        { field: 'approveNode', key: 'e', title: '审核节点', width: '' }
      ]
    }
  },
  created() {
    if (this.$route.query && this.$route.query.source === 'referenceList') {
      this.id = this.$route.query.id
      this.sourceFrom = this.$route.query.source
      this.initDatabase(this.$route.query.id)
    }
  },
  methods: {
    /**
     * 部门选择
     * @date 2021/7/3
     * @param e
     */
    async groupChange(e) {
      this.authUserData = []
      this.$set(this.formData, 'serviceUser', '')
      console.log(e, this.groupListData, this.groupListData[e])
      const list = await this.groupListData.filter((item) => {
        return item.label === e
      })
      if (list.length === 1) this.authUserData = list[0].children
      console.log(this.authUserData)
    },
    handleRemove(file) {
      console.log(file)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    },
    async submit() {
      this.loading = true
      const data = await this.$http.get('/flow/credit/sumbit/' + this.id, '')
      if (data.code === 200) {
        this.loading = false
      } else {
        this.loading = false
      }
    },
    async reject() {
      this.loading = true
      const data = await this.$http.get('/flow/orders/reject/' + this.id, '')
      if (data.code === 200) {
        this.loading = false
      } else {
        this.loading = false
      }
    },
    async suspend() {
      this.loading = true
      const data = await this.$http.get('/flow/orders/suspend/' + this.id, '')
      if (data.code === 200) {
        this.loading = false
      } else {
        this.loading = false
      }
    },
    /**
     * 获取征信单详情
     * @date 2021/7/6
     */
    async initDatabase(id) {
      this.banks = await commonService.getBankAll()
      this.groupListData = await commonService.getGroupUserAll()
      this.loading = true
      const data = await this.$http.get('/flow/credit/edit/' + id, {})
      if (data.code === 200) {
        if (data.data.orders) this.formData = data.data.orders
        console.log(this.formData)
        if (data.data.mainUser) this.mainUser = data.data.mainUser
        if (data.data.serviceOp) this.tableData = data.data.serviceOp
        console.log(this.tableData)
        if (data.data.credit) {
          this.$set(this.formData, 'serviceNo', data.data.credit.serviceNo)
          this.$set(this.formData, 'creditStatus', data.data.credit.creditStatus)
        }
        this.loading = false
      } else {
        this.loading = true
      }
    }
  }
}
</script>
<style lang="scss" scoped>

.app-container {
  width: 98%;
  margin: 0 auto 0;
  .save-busi-btn{
    overflow: hidden;
  }
  .btn-box {
    width: 100%;
    text-align: right;
    margin: 10px auto;
  }
  .part-title {
    margin: 0 0 0;
    font-size: 18px;
    font-weight: bold;
    .el-divider__text{
      font-size: inherit;
    }
  }
  .right-btn{
    float: right;
    margin: 0 0 10px 10px;
  }
  .part-box {
    padding: 20px 15px 0 0;
    //border-left: 1px solid #d3d6dd;
    //border-right: 1px solid #d3d6dd;
    //border-bottom: 1px solid #d3d6dd;
    .car-modal-col {
      width: 180px;
    }
    .upload-box {
      margin-left: 10px;
      margin-bottom: 10px;
    }
  }
  .part-title-box{
    height: 35px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-left: 5px solid #50bfff;
    margin: 20px auto;
    text-align: center;
    .part-tip{
      font-size: 14px;
      text-align: center;
      line-height: 35px;

    }
  }
}
.bottom-file{
  .title{
    font-size: 14px;
    margin: 20px 0;
    padding: 0 5px;
    font-weight: bold;
    border-left: 4px solid #2D7AEC;
    color: #333333;
  }
  .file-item-box{
    width: 100%;
    display: flex;
    flex-direction: row;
    .file-item{
      width: 120px;
      text-align: center;
      >img{
        width: 40px;
        height: 40px;
      }
      .file-name{
        font-size: 14px;
        color: #333333;
        line-height: 30px;
      }
    }
  }
}
.dialog-app-container {
  width: 100%;
  margin: -60px auto 0;
}
</style>
